<template>
	<view class="container">
		<view class="tcenter">
			<picker :range="classes" @change="onSelectClasses" range-key="name">
				<view>{{selectclass.name ? selectclass.name : '请选择班级'}}</view>
			</picker>
		</view>
		<view class="item" v-for="(i, index) in 3" :key="index">
				<view class="flex-ja-bc">
					<view class="flex">
						<view class="img margin-10-r">
							<image src="/static/kefu1.png" mode="" class="avatar"></image>
							<image class="badge" src="/static/vip.png" mode=""></image>
						</view>
						<view class="flexc-ja-cs">
							<view class="fbold">
								学员11
							</view>
							<view class="f14">
								17778174951
							</view>
						</view>
					</view>

					<view class="flex">
						<view class="flex-ja-bc info">
							<view class="btn margin-10-r">
								升级会员
							</view>
							<view class="btn bg-warning">
								查看打卡
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				selectclass: '',
				classes: [
					{
						id: 1,
						name: '一般'
					},
					{
						id: 2,
						name: '二般'
					},
					{
						id: 3,
						name: '三般'
					}
				]
			};
		},
		created:function(){
		},
		watch: {

		},
		methods: {
			onSelectClasses(event) {
				console.log(event)
				this.selectclass = this.classes[event.detail.value]
			}
			
		}

	}
</script>

<style lang="scss">
	.flex-ja-bc{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex-ja-ac{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.flexc-ja-cs{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.p10{
		padding: 10px;
	}
	.ellipsis{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.f16{
		font-size: 16px;
	}
	.f14{
		font-size: 14px;
	}
	.fbold{
		font-weight: bold;
	}
	.tcenter{
		text-align: center;
	}
	.flex{
		display: flex;
	}
	.margin-10-r{
		margin-right: 10px;
	}
	.bg-warning{
		background: #FE9E33!important;
	}
	.container {
		view {
			box-sizing: border-box;
		}
		padding: 20px 0;
		.item{
			padding: 10px 10px 10px;
			.img{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				position: relative;
				//overflow: hidden;
				.avatar{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.badge{
					position: absolute;
					right: 0px;
					bottom: 0px;
					width: 25px;
					height: 25px;
					border-radius: 50%;
				}
			}
			.btn{
				padding: 5px;
				background: #4A8BFE;	
				border-radius: 20px;
				color: #fff;
			}
			
		}
	}

	
</style>

